import 'braft-editor/dist/index.css'
import React, {useState}  from 'react'
import BraftEditor from 'braft-editor'

import {Button, Divider, Upload} from 'antd/lib'
import {EyeOutlined, FileImageOutlined} from '@ant-design/icons'

import {ContentUtils} from 'braft-utils'
import Table from 'braft-extensions/dist/table'
import 'braft-editor/dist/index.css'
import 'braft-extensions/dist/table.css'
import notification from "@/services/notification";
// 输出表格默认不带边框，如果需要边框，设置参数exportAttrString为'border="1" style="border-collapse: collapse"'
const options = {
  defaultColumns: 5, // 默认列数
  defaultRows: 5, // 默认行数
  withDropdown: true, // 插入表格前是否弹出下拉菜单
  columnResizable: true, // 是否允许拖动调整列宽，默认false
  exportAttrString: 'border="1" style="border-collapse: collapse"', // 指定输出HTML时附加到table标签上的属性字符串
  // includeEditors: ['id-1'], // 指定该模块对哪些BraftEditor生效，不传此属性则对所有BraftEditor有效
  // excludeEditors: ['id-2']  // 指定该模块对哪些BraftEditor无效
};
const controls = ['undo', 'redo', 'separator',
  'font-size', 'line-height', 'letter-spacing', 'separator',
  'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',
  'superscript', 'subscript', 'remove-styles', 'emoji',  'separator', 'text-indent', 'text-align', 'separator',
  'headings', 'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
  'link', 'separator', 'hr', 'separator',
  'media', 'separator',
  'clear','font-family']
BraftEditor.use(Table(options));
export default class EditorDemo extends React.Component {
   state = {
        // 创建一个空的contracteditor作为初始值
        contracteditor: BraftEditor.createEditorState(null),
        templatecontent:"",
    }
    componentWillMount() {
        // 假设此处从服务端获取html格式的编辑器内容
        const htmlContent = this.props.templatecontent ;
        // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat
        this.setState({
          contracteditor: BraftEditor.createEditorState(htmlContent),
          templatecontent: htmlContent,
        })
    }
  componentDidMount() {
    　　this.props.onRef(this);
  }
    submitContent = () => {
        // 在编辑器获得焦点时按下ctrl+s会执行此方法
        // 编辑器内容提交到服务端之前，可直接调用contracteditor.toHTML()来获取HTML格式的内容
        const htmlContent = this.state.contracteditor.toHTML()
        this.setState({
          contracteditor: BraftEditor.createEditorState(htmlContent),
          templatecontent: htmlContent,
        })
    }

    handleEditorChange = (contracteditor) => {
      try{
        this.setState({ contracteditor })
      } catch (err) {
        notification.error("表格粘贴失败，请在页面添加.");
        return;
      }
    }
    mybrafteditor = () => {
      const { contracteditor } = this.state
      const myUploadFn = (param) => {
      
                  const serverURL = 'api/upload/uploadfile';
                  const xhr = new XMLHttpRequest
                  const fd = new FormData()
      
                  const successFn = (response) => {
                    // 假设服务端直接返回文件上传后的地址
                    // 上传成功后调用param.success并传入上传后的文件地址"http://localhost:5000/static/images/footlogo.jpg"
                    console.log("xhr",xhr);
                    param.success({
                      // url: JSON.parse(xhr.responseText).filename,
                      url: xhr.responseURL.replace(serverURL, "static/file/") +JSON.parse(xhr.responseText).filename  ,
                      meta: {
                        id: 'img' + Math.random()*10,
                        title: '上传文件',
                        alt: '上传文件',
                        loop: true, // 指定音视频是否循环播放
                        autoPlay: true, // 指定音视频是否自动播放
                        controls: true, // 指定音视频是否显示控制栏
                        // poster: 'http://xxx/xx.png', // 指定视频播放器的封面
                      }
                    })
                  }
      
                  const progressFn = (event) => {
                    // 上传进度发生变化时调用param.progress
                    param.progress(event.loaded / event.total * 100)
                  }
      
                  const errorFn = (response) => {
                    // 上传发生错误时调用param.error
                    param.error({
                      msg: '上传失败！'
                    })
                  }
      
                  xhr.upload.addEventListener("progress", progressFn, false)
                  xhr.addEventListener("load", successFn, false)
                  xhr.addEventListener("error", errorFn, false)
                  xhr.addEventListener("abort", errorFn, false)
      
                  fd.append('file', param.file)
                  xhr.open('POST', serverURL, true)
                  xhr.send(fd)
               // console.log("xhr",xhr);
       }
              //  校验不通过的媒体文件将不会被添加到媒体库中
              const myValidateFn = (file) => {
                  // return file.size < 1024 * 100 ? message.success("图片上传成功！") : message.warn("图片太大，请上传合适大小的图片！");
                  return new Promise((resolve, reject) => {
                      setTimeout(() => {
                          file.size < 1024 * 1000 ? resolve() : reject()
                      }, 2000)
                  })
              }
              // 指定媒体库允许选择的本地文件的MIME类型
                const myUploadaccepts = {
                  image: 'image/png,image/jpeg,image/gif,image/webp,image/apng,image/svg',
                  video: 'video/mp4',
                  audio: 'audio/mp3'
                }
            try {
              return (
                <BraftEditor
                    value={contracteditor}
                    //controls={controls}
                    //stripPastedStyles = {true}
                    onChange={this.handleEditorChange}
                    onSave={this.submitContent}
                    media={{uploadFn: myUploadFn,validateFn: myValidateFn, accepts: myUploadaccepts,pasteImage: true }}
                />
        )
            } catch (e) {
              return (<div>不能粘贴TABLE表格，请手动添加</div>)
            }
    }
    render () {
//         const { contracteditor } = this.state
// const myUploadFn = (param) => {

//             const serverURL = 'api/upload/uploadfile';
//             const xhr = new XMLHttpRequest
//             const fd = new FormData()

//             const successFn = (response) => {
//               // 假设服务端直接返回文件上传后的地址
//               // 上传成功后调用param.success并传入上传后的文件地址"http://localhost:5000/static/images/footlogo.jpg"
//               console.log("xhr",xhr);
//               param.success({
//                 // url: JSON.parse(xhr.responseText).filename,
//                 url: xhr.responseURL.replace(serverURL, "static/file/") +JSON.parse(xhr.responseText).filename  ,
//                 meta: {
//                   id: 'img' + Math.random()*10,
//                   title: '上传文件',
//                   alt: '上传文件',
//                   loop: true, // 指定音视频是否循环播放
//                   autoPlay: true, // 指定音视频是否自动播放
//                   controls: true, // 指定音视频是否显示控制栏
//                   // poster: 'http://xxx/xx.png', // 指定视频播放器的封面
//                 }
//               })
//             }

//             const progressFn = (event) => {
//               // 上传进度发生变化时调用param.progress
//               param.progress(event.loaded / event.total * 100)
//             }

//             const errorFn = (response) => {
//               // 上传发生错误时调用param.error
//               param.error({
//                 msg: '上传失败！'
//               })
//             }

//             xhr.upload.addEventListener("progress", progressFn, false)
//             xhr.addEventListener("load", successFn, false)
//             xhr.addEventListener("error", errorFn, false)
//             xhr.addEventListener("abort", errorFn, false)

//             fd.append('file', param.file)
//             xhr.open('POST', serverURL, true)
//             xhr.send(fd)
//          // console.log("xhr",xhr);
//  }
//         //  校验不通过的媒体文件将不会被添加到媒体库中
//         const myValidateFn = (file) => {
//             // return file.size < 1024 * 100 ? message.success("图片上传成功！") : message.warn("图片太大，请上传合适大小的图片！");
//             return new Promise((resolve, reject) => {
//                 setTimeout(() => {
//                     file.size < 1024 * 1000 ? resolve() : reject()
//                 }, 2000)
//             })
//         }
//         // 指定媒体库允许选择的本地文件的MIME类型
//           const myUploadaccepts = {
//             image: 'image/png,image/jpeg,image/gif,image/webp,image/apng,image/svg',
//             video: 'video/mp4',
//             audio: 'audio/mp3'
//           }
        return (
            <div className="my-component">
              {this.mybrafteditor()}
                {/* <BraftEditor
                    value={contracteditor}
                    //controls={controls}
                    //stripPastedStyles = {true}
                    onChange={this.handleEditorChange}
                    onSave={this.submitContent}
                    media={{uploadFn: myUploadFn,validateFn: myValidateFn, accepts: myUploadaccepts,pasteImage: true }}
                /> */}
            </div>
        )

    }

}
